<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <div
        class="panel active"
        style="
          background-image: url('https://images.unsplash.com/photo-1561948955-570b270e7c36?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
        "
      >
        <h2>Demanding cat</h2>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
        "
      >
        <h2>Chic cat</h2>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fGNhdHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
        "
      >
        <h2>Happy cat</h2>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjN8fGNhdHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
        "
      >
        <h2>Manly cat</h2>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1503777119540-ce54b422baff?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzJ8fGNhdHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
        "
      >
        <h2>Curious cat</h2>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>
